<template>
  <div class="container">
    <ul class="navList">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <p class="title">本周限免</p>

  <scroll-view scroll-x class="scroll-view-x scroll-view-x-padding" style="width:100%;"> 
   <view class="scroll-view-x"> 
         <!-- <view class="scroll-x-item bg_green" v-for="(heroList,index) in heroLists" :key="heroList['式神ID']"> -->
    <view class="scroll-x-item bg_green" v-for="(heroList,index) in heroLists" :key="index">
    <div class="scroll-x-item-box">
    <img class="scroll-x-item-img" :src="heroList.imgUrl" >
    <p class="scroll-x-item-name">{{heroList['式神名称']}}</p>
    </div>  
    </view> 
   </view> 
  </scroll-view> 


    <p class="title">推荐内容</p>

    <ul class="newsList">
      <li v-for="listsizes in listsize" :key="listsizes">
        <div class="newList-img-box">
          <img src="../../../static/2.png" alt="">
        </div>
        <p class="newList-title">占位符占位符占位符占位符占位符</p>
      </li>
    </ul>


  </div>
</template>

<script>

import store from '../../store'

export default {
  data () {
    return {
      motto: 'Hello World',
      listsize:10
    }
  },
  computed:{
   heroLists(){
        const Hero = store.state.Hero;
        const imgUrl = store.state.imgUrl;
        const list = [];
        const imgUrlList = []
        for(var i in Hero){
          if(Hero[i]['是否限免'] == true){
            for(var a in imgUrl){
              if(a == Hero[i]['式神方头像'] ){
                Hero[i]['imgUrl'] = imgUrl[a];
              }
            }
            list.push(Hero[i]);
          }
        }
        console.log(list)
        return list;

    }

  },
  components: {
 
  },
  methods: {
    getInfo(){
      const _this = this;
      // 请求式神
      wx.request({
        url: 'https://comp-sync.webapp.163.com/g78_hero/free_convey', 
        success: function(res) {
          const info = res.data.data;
          store.dispatch('changeHero',info)
        }
      })
      // 请求图片
      wx.request({
        url: 'https://comp-sync.webapp.163.com/g78_pics/api', 
        success: function(res) {
          const info = res.data.path_dict; 
           store.dispatch('changeImgUrl',info)
        }
      })
    }
  },
  created () {
    this.getInfo();

  }
}
</script>

<style scoped>
.container{

  background:#faf8f5 url('../../../static/background.png') ;
}
.navList{
  padding: 30rpx;
  overflow: hidden;
  padding-bottom:30rpx;
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between
  
}
.navList li{

  width: 334rpx;
  height: 160rpx;
  border-radius: 20rpx;
  background:#000000 url('../../../static/navlist.jpg') no-repeat;
  margin-bottom: 28rpx
}
.title{
  font-size: 48rpx;
  color: #404040;
  padding-left:30rpx;
  padding-bottom: 36rpx;
}

.scroll-view-x-padding{
    padding-left:30rpx;
    box-sizing: border-box;
    margin-bottom:30rpx;
}
.scroll-view-x { 
 display: flex; 
 overflow: scroll; 
} 
  
.scroll-x-item { 
 display: inline-table; 
  width: 140rpx;
  padding-bottom: 20rpx;
  margin-right: 48rpx;
}

.scroll-x-item-box .scroll-x-item-img{
  width:118rpx;
  height: 118rpx;
  border:2px solid #404040;
  border-radius: 118rpx;
  display: block;
  margin: 0 auto
}
.scroll-x-item-box .scroll-x-item-name{
  font-size: 24rpx;
  color: #404040;
  text-align: center;
  margin-top: 20rpx;
  font-weight: bold
}



.newsList{
  padding:0 30rpx;
}

.newsList li{
  margin-bottom:30rpx;
}
.newsList .newList-img-box{
  width: 100%;
  height: 380rpx;
  border-radius: 10rpx;
  background: red;
  margin-bottom: 25rpx;
}

.newsList .newList-img-box>img{
  width: 100%;
  height: 100%;
}
.newsList .newList-title{
  font-size: 36rpx;
  color: #404040;
}
</style>
